import React, { useEffect, useState } from 'react'
import PubSub from 'pubsub-js'
import axios from 'axios'

export default function Head() {
  const [search, setSearch] = useState('')

  const inputHandle = (e) => {
    setSearch(e.target.value)
  }

 useEffect(()=>[
   //发布订阅
  PubSub.publish("data", {isInit:true,isSearch:true,data:[]})
 ],[])

  const requestHandle = async () => {
    PubSub.publish("data", {isInit:false,isSearch:true,data:[]})
    const result = await axios.get('https://api.github.com/search/users?q=' + search)
    
    PubSub.publish("data", {isInit:false,isSearch:false,data:result.data})
  }




  return (
    <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" value={search} onChange={inputHandle} placeholder="enter the name you search" />&nbsp;
        <button onClick={requestHandle}>Search</button>
      </div>
    </section>
  )
}
